<template>
  <div>
    <!-- 面包屑 -->
    <!--  <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="handleClickCreate"
          >新增</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form> -->

    <Container>
      <!-- 表格 -->
      <ContainerTitle>选择橙子建站落地页【单选】</ContainerTitle>
      <!-- <el-button
            size="mini"
            type="primary"
            @click="handleClickCreate"
            class="u-mb10"
          >新增</el-button> -->
      <div class="u-mb10" style="display: inline-block">
        <el-input
          v-model="searchVal"
          placeholder="可搜索素材ID或素材名称"
          class="u-w350 u-ml10"
        ></el-input>
        <el-button type="primary" class="u-ml10" @click="search">搜索</el-button>
      </div>
     <!--  <div class="u-mb10" style="display: inline-block; margin-left: 50px">
        类型
        <el-select
          class="u-w350"
          placeholder="请选择头条账户(手动搜索+多选)"
          filterable
          v-model="type"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div> -->
        <div class="dialogCont">
          <div class="dialogCont">
            <div
              v-for="(item, index) in imgList"
              :key="index"
              class="dialogImgCont"
              @click="handleClickChoose(item, index)"
            >
              <div class="imgList-icon">
                <img
                  v-if="!item.userCheck"
                  src="@/assets/img/checked.png"
                  alt
                />
                <img v-else src="@/assets/img/checked2.png" alt />
              </div>
              <img :src="item.thumbnail" alt class="imgList" />
              <el-button  type="primary" @click="preview(item)">预览</el-button>
            </div>
          </div>
          <!-- <div>内容为空</div> -->
        </div>
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup isFixed align="right">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button size="small" type="primary" @click="goBack"
          >确定</el-button
        >
      </ButtonGroup>
    </Affix>
  </div>
</template>

<script>
import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";
import { eventBus } from "@/assets/js/enentBus";
import { exportExcel } from "@/utils/fileDown.js";
import { OPERATOR_OPTION, CUSTOMER_ROLE_OPTION } from "@/assets/js/flow-option";
import { mapOptionLabel } from "@/util";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";
export default {
  components: {
    Container,
    CustomTableColumn,
    ContainerTitle,
    Affix,
    ButtonGroup,
  },
  data() {
    return {
      OPERATOR_OPTION,
      CUSTOMER_ROLE_OPTION,
      // 模版
      dialogOperateVisible: false,
      searchVal: "", //搜索内容
      accountId:"",
      type: "", //素材类型
      templateData: "",
      multipleSelection: [],
      imgList:null,
      arrImgList:[],
      tableSelectionData: [],
      typeOptions: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "横竖屏均可",
          id: 1,
        },
        {
          name: "竖屏",
          id: 2,
        },
        {
          name: "横屏",
          id: 3,
        },
      ],
      tableColumn: [
        {
          label: "任务名称",
          prop: "taskName",
          visible: true,
        },
        {
          label: "账号名称",
          prop: "accountName",
          visible: true,
        },
        {
          label: "上传状态",
          prop: "status",
          visible: true,
        },
        {
          label: "操作人",
          prop: "operate",
          visible: true,
        },
        {
          label: "操作日期",
          prop: "date",
          visible: true,
        },
      ],
      page: {
        pageNo: 1,
        pageSize: 100,
      },
      pageTotal: 0,
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter((item) => item.visible);
    },
  },
  methods: {
    mapOptionLabel,
    exportExcel,
    handleEnsure() {
      console.log(this.arrImgList);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    preview(item){
      window.open("https://www.chengzijianzhan.com/tetris/page/"+item.siteId)
    },
    handleClickCreate() {
      this.$router.push({
        name: "toutiao-currency-detail",
        query: {
          action: "create",
        },
      });
    },
    handleClickChoose(e,index){
      this.imgList.forEach(item=>{
        item.userCheck = false
      })
       e.userCheck = !e.userCheck;
       this.arrImgList = this.imgList[index];
       this.$set(this.arrImgList,"accountId",this.accountId);
    },
    handleClickLook(data) {
      this.$router.push({
        name: "toutiao-see",
        query: {
          data: data,
        },
      });
      // 获取模版接口
      // console.log(id)
      /* this.dialogOperateVisible = true
      this.$http({
        method: "get",
        url: "/marketing/api/task/getTemplateByTaskId",
        params: {
         taskId: id,
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.templateData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }); */
    },

    // 运营人员
    getCurrentOperate(data = []) {
      let len = data.length;
      if (len) {
        let item = data[len - 1];
        return `${item.operatorBy}`;
      }
      return "-";
    },
    goBack() {
      this.$set(this.arrImgList,"index",this.$route.query.index);
      eventBus.$emit("landPageInfo", this.arrImgList);
      //调用router回退页面
      this.$router.go(-1);
    },
    // 列表
    search() {
      this.$http({
      method: "get",
      url: "/marketing_tt/api/task_tt_general/get_site_id",
      params: {
        accountId: this.accountId,
        search: this.searchVal,
      },
    }).then((res) => {
      /*  let data = res.data.data.list;
      this.industryOptions = this.getTreeData(data); */
      this.imgList = res.data.data.data.list;

      this.imgList.forEach(item=>{
        this.$set(item,"userCheck",false)
      })
    });
    },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getTable();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getTable();
    },
  },
  created() {
    this.accountId = this.$route.query.accountId;
    this.search();
  },
};
</script>
<style scoped>
.dialogCont {
  overflow: hidden;
}
.dialogImgCont {
  float: left;
  margin-right: 7px;
  margin-left: 8px;
  position: relative;
  width: 148px;
  height: 200px;
  margin-top: 15px;
  text-align: center;
}
.chooseImg {
  position: absolute;
  left: 200px;
  top: 80px;
}
.imgList {
  width: 148px;
  height: 148px;
}
.imgList-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 20px;
}
.imgList-icon img {
  width: 28px;
  height: 28px;
}
.deleteVideo {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin-top: 5px;
}
</style>